<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			input.select-infoH {
				width: 20px;
				height: 20px;
			}

			select.select-infoH {
				width: 100px;
				height: 130px;
			}
		</style>
	</head>
	<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
	<!-- 加载 Select2 -->
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
	<script src="combination_struct.v1.2.js" type="text/javascript"></script>

	<body>
		<p>性别
			<checkgroup typeId="008" topText="性别" class="select-infoH" name="p1">
				<input type="radio" name="sex" value="0" showValue="男" /> 男
				<input type="radio" name="sex" value="1" showValue="女" /> 女
			</checkgroup>
			<a href="#" onclick="deleteProperty(this)">删除</a>
		</p>

		<p>出口国
			<checkgroup typeId="992" topText="出口国" class="select-infoH" name="p2">
				<input type="checkbox" name="gj" value="China" showValue="中国" /> 中国
				<input type="checkbox" name="gj" value="Americel" showValue="美国" /> 美国
				<input type="checkbox" name="gj" value="japanise" showValue="日本" /> 日本
			</checkgroup>
			<a href="#" onclick="deleteProperty(this)">删除</a>
		</p>

		<span>
			<!-- name和typeId必须要  -->
			<select class="select-infoH form-control" name="p3" multiple="multiple" typeId="10086" topText="颜色">
				<option value="001">黑色</option>
				<option value="002">红色</option>
				<option value="003">紫色</option>
				<option value="004">白色</option>
			</select>
		</span>

		<span>
			<select class="select-infoH" name="p4" multiple="multiple" typeId="10088" topText="季节">
				<option value="101">春季</option>
				<option value="102">夏季</option>
				<option value="105">秋季</option>
				<option value="106">冬季</option>
			</select>
			<a href="#" onclick="deleteProperty(this)">删除</a>
		</span>


		<button onclick="getTableData()">生成规格</button>

		<table style="margin-top:20px;" id="listguige" border="1" v-if="rowList.length>0">
			<thead>
				<tr>
					<th width="200">操作</th>
					<th width="200" v-for='row in rowInfo'>{{row.topText}}</th>
				</tr>
			</thead>

			<tbody>
				<tr v-for='item in rowList'>
					<td style="text-align: center;" @click="deleteRow(item)">
						删除
					</td>
					<td style="text-align: center;" v-for='key in item'>
						<span v-if="!key.edit">{{key.showV}}</span>
						<!-- 规格部分使用 主id + 副id -->
						<input v-if="!key.edit" type="hidden" v-bind:name="key.name" v-bind:value="key.topId+':'+key.value">
						<input v-else type="text" v-bind:name="key.name" v-bind:value="key.value">
					</td>
				</tr>
			</tbody>
		</table>

	</body>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

	<script>
		var comb = new CombinationStruct();
		comb.init({
			select_info: ".select-infoH",
			extra: {
				"weight": {
					value: "",
					name: "weight",
					showV: "重量1",
					topId: "",
					topText: "重量",
					edit: false //是否需要编辑
				},
				"stock": {
					value: "",
					name: "stock",
					showV: "库存",
					topId: "",
					topText: "库存",
					edit: true //是否需要编辑
				}
			},
			extraParam: true
		});

		var vueInfo = new Vue({
			el: '#listguige',
			data: {
				rowInfo: [],
				rowList: []
			},
			methods: {
				deleteRow: function(item) { //数据列的删除
					let rowList = vueInfo.rowList;
					
					for (var ind in rowList) {
						if (rowList[ind] == item) {
							rowList.splice(ind, 1);
							vueInfo.$data.rowList = rowList;
						}
					}
					
					//删除仍然存在的属性值
					for (var ind in rowList) {
						for (var key in item) {
							if (rowList[ind][key].topId &&
							 rowList[ind][key].topId == item[key].topId
							  && item[key].value == rowList[ind][key].value) {
								delete item[key];
							}
						}
					}
					
					//删除被删除的属性值 让选项置空
					for (var key in item) {
						//将下拉框 多选框 单选框的已清空选项 置为未选中
						$("select[typeid='"+item[key].topId+"']").find("option[value='"+item[key].value+"']").attr("selected",false);
						$("checkgroup[typeid='"+item[key].topId+"']").find("input[value='"+item[key].value+"']").attr("checked",false);
					}
					
				}
			}
		});

		function getTableData() {
			vueInfo.rowInfo = comb.getRowTd();
			vueInfo.rowList = comb.getTableData();
		}

		//删除规格
		function deleteProperty(target) {
			$(target).parents("span,p,div").remove();
			getTableData();
		}
	</script>
</html>
